<template>
    <!-- 侧边栏组件，宽度根据 Vuex 中的折叠状态动态切换 -->
    <el-aside :width="$store.state.isCollapsed ? '64px' : '200px'">

        <!-- 侧边栏导航菜单，集成路由功能并根据用户角色显示对应菜单项 -->
          <!-- 绑定折叠状态（来自 Vuex） -->
              <!-- 关闭折叠过渡动画 -->
                <!-- 开启路由模式（自动匹配路由地址） -->
                  <!-- 高亮当前路由对应的菜单项 -->
        <el-menu 
            :collapse="$store.state.isCollapsed"        
            :collapse-transition="false"             
            :router="true"                             
            :default-active="route.fullPath"           
        >
            <!-- 个人中心菜单项（所有角色可见） -->
            <el-menu-item index="/center">
                <el-icon>
                    <avatar />                          <!-- 头像图标 -->
                </el-icon>
                <span>个人中心</span>
            </el-menu-item>

            <!-- 学生角色专属菜单：准备模块（包含子菜单） -->
            <el-sub-menu index="/prepare" v-if="store.state.userInfo.role === '学生'">
                <template #title>
                    <el-icon>
                        <Edit />                         <!-- 编辑图标 -->
                    </el-icon>
                    <span>准备</span>
                </template>
                <el-menu-item index="/prepare/material">资料查看</el-menu-item>
                <el-menu-item index="/prepare/cvmaker">简历制作</el-menu-item>
            </el-sub-menu>

            <!-- 学生角色专属菜单：简历投递 -->
            <el-menu-item index="/cvpost" v-if="store.state.userInfo.role === '学生'">
                <el-icon>
                    <Suitcase />                       <!-- 公文包图标，象征简历投递 -->
                </el-icon>
                <span>简历投递</span>
            </el-menu-item>

            <!-- 学生角色专属菜单：简历评价 -->
            <el-menu-item index="/comment" v-if="store.state.userInfo.role === '学生'">
                <el-icon>
                    <Suitcase />                       <!-- 公文包图标 -->
                </el-icon>
                <span>简历评价</span>
            </el-menu-item>

            <!-- 教师角色专属菜单：信息添加 -->
            <el-menu-item index="/information-manage/add" v-if="store.state.userInfo.role === '教师'">
                <el-icon>
                    <Edit />                         <!-- 编辑图标，象征内容管理 -->
                </el-icon>
                <span>信息添加</span>
            </el-menu-item>

            <!-- 教师角色专属菜单：资料添加 -->
            <el-menu-item index="/information-manage/materialAdd" v-if="store.state.userInfo.role === '教师'">
                <el-icon>
                    <Edit />                         <!-- 编辑图标 -->
                </el-icon>
                <span>资料添加</span>
            </el-menu-item>

            <!-- 教师角色专属菜单：信息列表 -->
            <el-menu-item index="/information-manage/list" v-if="store.state.userInfo.role === '教师'">
                <el-icon>
                    <Edit />                         <!-- 编辑图标 -->
                </el-icon>
                <span>信息列表</span>
            </el-menu-item>

            <!-- 教师角色专属菜单：资料列表 -->
            <el-menu-item index="/information-manage/materialList" v-if="store.state.userInfo.role === '教师'">
                <el-icon>
                    <Edit />                         <!-- 编辑图标 -->
                </el-icon>
                <span>资料列表</span>
            </el-menu-item>

             <!-- 普通用户角色专属菜单：加购列表 -->
            <el-menu-item index="/center/Dish" v-if="store.state.userInfo.role === '教师'">
               <el-icon>
                   <Edit /> 
                </el-icon>
                <span> 菜单列表</span>
            </el-menu-item>
            <!-- 普通用户角色专属菜单：加购列表 -->
            <el-menu-item index="/center/Cart" v-if="store.state.userInfo.role === '教师'">
               <el-icon>
                   <Edit /> 
                </el-icon>
                <span> 购物车列表</span>
            </el-menu-item>

            <!-- 管理员角色专属菜单：资料列表 -->
            <el-menu-item index="/usercenter" v-if="store.state.userInfo.role === '管理员'">
                <el-icon>
                    <Edit />                         <!-- 编辑图标 -->
                </el-icon>
                <span>菜单列表</span>
            </el-menu-item>

            <!-- 管理员角色专属菜单：Tea 列表 -->
            <el-menu-item index="/center/tea" v-if="store.state.userInfo.role === '管理员'">
               <el-icon>
                   <Edit /> 
                </el-icon>
                <span>Tea 列表</span>
            </el-menu-item>

        </el-menu>

    </el-aside>
</template>

<script setup>
// 引入所需的 Element Plus 图标组件
import { Avatar, Edit, Suitcase } from '@element-plus/icons-vue'
// 引入 Vue Router 钩子获取当前路由信息
import { useRoute } from 'vue-router'
// 引入 Vuex 钩子获取全局状态
import { useStore } from 'vuex'

// 获取当前用户身份（从本地存储读取）
const identity = localStorage.getItem('identity')
// 初始化路由对象（用于菜单激活状态）
const route = useRoute()
// 初始化 Vuex 仓库对象（用于获取用户角色和菜单折叠状态）
const store = useStore()

// 自定义指令：根据用户角色动态移除元素（未在模板中使用，保留扩展可能）
const vAdmin = {
    mounted(el) {
        // 若用户角色不是 "1"，则从 DOM 中移除当前元素
        if (store.state.userInfo.role !== '1') {
            el.parentNode.removeChild(el)
        }
        // 打印用户身份（调试用）
        console.log(identity)
    }
}
</script>

<style lang="scss" scoped>
/* 侧边栏高度固定为视口高度，实现全屏显示 */
.el-aside {
    height: 100vh;
}
</style>